<template>
  <view class="container">
    <ve-navbar title="费项选择" :autoBack="false" @leftClick="close"> </ve-navbar>
    <ve-search-bar placeholder="请输入" @search="getList" />
    <scroll-view class="scroll-cont" scroll-y>
      <template v-for="(item, index) in list" :key="index">
        <view class="fee-name" @click="chooseName(item, index)" :class="{ disabled: item.disabled }">
          <text class="fee-name-text">{{ item.itemName }}</text>
          <image class="icon-choose" v-if="item.choose" src="@/static/icons/icon-checkbox-select.png" />
          <image class="icon-choose" v-if="!item.choose && !item.disabled" src="@/static/icons/icon-checkbox.png"></image>
        </view>
      </template>
      <ve-empty text="没有数据~" v-if="list.length == 0" />
      <ve-gap size="2"></ve-gap>
    </scroll-view>

    <!-- 加载中tip -->
    <ve-toast ref="toastRef"></ve-toast>
    <!-- 底部 -->
    <ve-bottom-box>
      <ve-button type="primary" @click="onConfirm" size="long">确定</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, getCurrentInstance } from 'vue'
  const _this = getCurrentInstance().proxy
  import { getAllCustomItem } from '@/api/home/revenue'

  const close = () => {
    uni.navigateBack()
  }

  const formDatas = ref([])
  const pageType = ref('')
  const pageIndex = ref('')
  const currentName = ref('')

  let eventChannel
  onLoad((options) => {
    eventChannel = _this.getOpenerEventChannel()
    pageType.value = options.type
    pageIndex.value = options.index
    formDatas.value = JSON.parse(decodeURIComponent(options.list))
    currentName.value = formDatas.value[pageIndex.value] || ''
    console.log(formDatas.value, formDatas.value[pageIndex.value])
    getList()
  })
  // 更新disabled状态
  const updateDisabledStatus = () => {
    // 获取所有已填写的名称
    const usedNames = formDatas.value.filter((itemName) => itemName !== '') // 过滤空值
    list.value = list.value.map((item) => {
      // 检查当前项的value是否存在于已使用的名称中
      const isDisabled = usedNames.includes(item.itemName) && item.itemName != currentName.value
      return { ...item, disabled: isDisabled }
    })
  }

  // 加载list before
  const list = ref([])

  // 加载list
  const toastRef = ref()
  const getList = (keyword = undefined) => {
    getAllCustomItem({ type: pageType.value }).then((res) => {
      if (res.code == 200) {
        list.value = res.result.map((item) => {
          return {
            itemName: item,
            choose: item == currentName.value,
          }
        })
        if (keyword) {
          // 前端模糊过滤
          const searchText = keyword.trim().toLowerCase()
          list.value = list.value.filter((item) => {
            const itemText = item.itemName.trim().toLowerCase()
            return itemText.includes(searchText)
          })
        }
        updateDisabledStatus()
      }
    })
  }

  const chooseName = (item, index) => {
    if (!item.disabled) {
      list.value = list.value.map((listItem) => ({
        ...listItem,
        choose: false,
      }))
      list.value[index].choose = !item.choose
      currentName.value = !item.choose ? item.itemName : ''
      console.log(currentName.value)
    }
  }
  const onConfirm = () => {
    eventChannel.emit('selectorConfirm', currentName.value, pageIndex.value)
    uni.navigateBack()
  }
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    width: 100%;
    background: #f7f8fa;

    .scroll-cont {
      padding-top: 24rpx;
    }

    .fee-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 24rpx 24rpx 24rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 32rpx;
      font-weight: 400;
      font-size: 30rpx;
      color: rgba(0, 0, 0, 0.85);
      line-height: 44rpx;
      &.disabled {
        color: #999999;
      }
      .icon-choose {
        width: 36rpx;
        height: 36rpx;
        text-align: right;
      }
    }
  }
  // 关闭默认导航， "navigationStyle": "custom",不生效
  :deep(uni-page-head) {
    display: none;
  }
</style>
